<template>
    <div>
        <myheader/>
        <van-tabs v-model="active">
            <van-tab title="用户名登录">
                <van-form @submit="login">
                    <van-field
                        v-model="username"
                        name="username"
                        placeholder="请输入用户名"
                        label="用户名"
                        :rules="[{required:true,'message':'请输入用户名'}]"
                    />

                    <van-field
                        v-model="password"
                        type="password"
                        name="password"
                        placeholder="请输入密码"
                        label="密码"
                        :rules="[{'required':true,'message':'请输入密码'}]"
                    />

                    <drag-verify
                        :width="400"
                        :height="30"
                        text="请拖动滑块!"
                        ref="Verify"
                    />

                    <van-button round type="info" native-type="submit" style="width: 200px;margin-left: 90px;margin-top: 50px">登录</van-button>

                </van-form>
            </van-tab>

            
            <van-tab title="手机号登陆">
                <van-count-down :time="60000" :auto-start="false" v-show="show" ref="countDown"  @finish='finish' format="还剩ss秒"/>
                    <van-field label="手机号" placeholder="请输入手机号" v-model="mobile" name='mobile'>
                    </van-field>

                    <van-field label="验证码" placeholder="请输入手机验证码" v-model="code" name='code'>
                        <template #button>
                        <van-button type="info" size="small" style="background-color: orange" @click="sendmsg()" :disabled="flag">{{ meg }}</van-button>
                        </template>
                    </van-field>


                    <van-button round type="info" native-type="submit" style="width: 200px;margin-left: 90px;margin-top: 50px"  @click="mobile_login">登录</van-button>
                
            </van-tab>
        </van-tabs>
        
    </div>
</template>

<script>
import myheader from '../myheader.vue'
import dragVerify from 'vue-drag-verify'

export default {

data(){
    return{
        show:false,
        active:1,
        username:'',
        password:'',
        mobile:'',
        code:'',
        meg:'获取手机号',
        flag:false
    }
    },
    methods: {
        //倒计时
        finish() {
            this.$toast.success("倒计时结束");
            this.show = false
            this.$refs.countDown.reset();
        },
        // 手机号登录
        mobile_login:function(){
            this.axios.post('users/mobile_login/',{'mobile':this.mobile,'code':this.code})
            .then(res=>{
                if(res.data.code==200){
                    this.$toast.fail("登录成功")
                    localStorage.setItem('token',res.data.token)
                    localStorage.setItem('userid',res.data.userid)
                    localStorage.setItem('username',res.data.username)
                    this.$router.push({"path":"/"})
                }else{
                    this.$toast.fail(res.data.mes)
                }
            })
        },
        // 发送验证吗:
        sendmsg:function(){
            if(this.mobile==''){
                this.$toast.fail("手机号不能为空")
                return false
            }else if(!(/^1[3-9]\d{9}$/.test(this.mobile))){ 
                this.$toast.fail("手机号不合法");  
                return false; 
            }else{
                this.$toast.fail("发送成功")
                this.axios.post('users/login/?mobile='+this.mobile)
                .then(res=>{
                    if(res.data.code==200){
                        
                        // 发送成功倒计时
                        this.show = true
                        this.$refs.countDown.start();

                    }else{
                        this.$toast.fail(res.data.mes)
                    }
                })
            }
        },
        // 用户登录
        login:function(){
            if(this.$refs.Verify.isPassing){
                this.axios.get('users/login/?username='+this.username+'&password='+this.password)
                .then(res=>{
                    
                    if(res.data.code==200){
                        this.$toast.fail('登录成功')
                        localStorage.setItem('token',res.data.token)
                        localStorage.setItem('userid',res.data.userid)
                        localStorage.setItem('username',res.data.username)
                        this.$router.push({"path":"/"})
                    }else{
                        this.$toast.fail(res.data.mes)
                    }
                })
            }else{
                this.$toast.fail('请拖动滑块')
            }
        },


    },
    components:{
        'myheader':myheader,
        'dragVerify':dragVerify
    },
    mounted() {
        
    },

}
</script>

<style scoped>

</style>